<script>
	import IconifyIcon from '@iconify/svelte';
</script>

<style>
	/* 
		Cannot target component in CSS, target SVG 
		instead using Svelte's :global() function 

		This is equivalent of adding inline={true} to each icon
	*/
	div :global(svg) {
		vertical-align: -0.125em;
	}

	/* Change text color for ".orange-block" to #e70 */
	.orange-block {
		color: #e70;
	}
	/* Change all icons inside ".light-blue-block" to #08f */
	/*
		Must use :global() because Svelte cannot assign style to
		a component, so need to target SVG generated by component.
	*/
	.light-blue-block :global(svg) {
		color: #08f;
	}

	/* Change text color for ".red-icon" to #e00 */
	/*
		Must use :global() because Svelte cannot assign style to a
		component by class name, it can only work with standard HTML tags.
	*/
	div :global(.red-icon) {
		color: #e00;
	}
</style>

<div>
	<div class="light-blue-block">
		All icons inside this div are light blue, including a bell icon
		<IconifyIcon icon="bi:bell-fill" />
		and stopwatch icon
		<IconifyIcon icon="bi:stopwatch" />
	</div>
	<div class="orange-block">
		This text and icon are orange:
		<IconifyIcon icon="bi:bell-fill" />
	</div>
	<div>
		Red home icons (shows different ways to change color):
		<IconifyIcon class="red-icon" icon="bx:bx-home" />
		<IconifyIcon style="color: red" icon="bx:bx-home" />
		<IconifyIcon color="red" icon="bx:bx-home" />
	</div>
	<div>
		Icon with palette:
		<IconifyIcon icon="noto:paintbrush" />
	</div>
</div>
